import LbxinReact from "./LbxinReact"
// const root = document.getElementById("root")
// /**@jsx LbxinReact.createElement*/
// const virtualDOM = (
//   <div className="container">
//     <h1>你好 Tiny React</h1>
//     <h2 data-test="test">(编码必杀技)</h2>
//     <div>
//       嵌套1 <div>嵌套 1.1</div>
//     </div>
//     <h3>(观察: 这个将会被改变)</h3>
//     {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
//     {2 == 2 && <div>2</div>}
//     <span>这是一段内容</span>
//     <button onClick={() => alert("你好")}>点击我</button>
//     <h3>这个将会被删除</h3>
//     2, 3
//     <input type="text" value="13" />
//   </div>
// )
// const newVirtualDOM = (
//   <div className="container">
//     <h1>你好 Tiny React</h1>
//     <h2 data-test="test123">(编码必杀技)</h2>
//     <div>
//       嵌套1 <div>嵌套 1.1</div>
//     </div>
//     <h3>(观察: 这个将会被改变)</h3>
//     {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
//     {2 == 2 && <div>2</div>}
//     <span>这是一段被修改过的内容</span>
//     <button onClick={() => alert("你好 - Lbxin")}>点击我</button>
//     <h6>这个将会被删除</h6>
//     2, 3
//     <input type="text" value="13" />
//   </div>
// )
// const delVirtualDOM = (
//   <div className="container">
//     <h1>你好 Tiny React</h1>
//     <h2 data-test="test">(编码必杀技)</h2>
//     <div>
//       嵌套1 <div>嵌套 1.1</div>
//     </div>
//     <h3>(观察: 这个将会被改变)</h3>
//     {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
//     {2 == 2 && <div>2</div>}
//     {/* <span>这是一段内容</span> */}
//     <button onClick={() => alert("你好")}>点击我</button>
//     {/* <h3>这个将会被删除</h3>
//     2, 3 */}
//     <input type="text" value="13" />
//   </div>
// )
// LbxinReact.render(virtualDOM, root)
// setTimeout(() => {
// LbxinReact.render(delVirtualDOM, root)
// }, 2000);

// console.log(virtualDOM,'virtualDOM=========')
function Heart1(props){
  return <span id={props.id}>&hearts;&hearts;</span>
}
function Heart(props){
  return <div>{props.title}&hearts;<Heart1 id='heart-1'/></div>
}
// LbxinReact.render(<Heart title="hello lbxin"/>, root)

class HeartClass extends LbxinReact.Component {
  // 子类继承自父类 当父类中拥有某个属性时  子类也可以通过继承逻辑拿到对应的属性值
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div>
        {this.props.name}
        {this.props.age}
      </div>
    )
  }
}
class LbxinClass extends LbxinReact.Component {
  // 子类继承自父类 当父类中拥有某个属性时  子类也可以通过继承逻辑拿到对应的属性值
  constructor(props){
    super(props)
    this.handleClickRef = this.handleClickRef.bind(this)
  }

  componentDidUpdate(){
    console.log('componentDidUpdate=========')
  }
  componentWillUnmount(){
    console.log('componentWillUnmount=========')
  }
  // componentWillReceiveProps(nextProps){
  //   console.log(nextProps,'componentWillReceiveProps=========')
  // }
  // componentWillUpdate(){
  //   console.log('componentWillUpdate=========')
  // }

  // componentDidUpdate(){
  //   console.log('componentDidUpdate=========')
  // }
  handleClick(){
    this.setState({
      title: 'changed lbxin'
    })
  }
  
  handleClickRef(){
    console.log(this.input.value,'this.input=========')
    console.log(this.HeartClass,'this.input=========')
  }
  render(){
    return (
      <div>
        Hello Class Lbxin
        {this.props.name}
        {/* {this.props.age}
        <div>{this.state.title}</div>
        <button onClick={this.handleClick}>改变title</button> */}
        <input type="text" ref={input => {
          this.input = input
        }}/>
        <button onClick={this.handleClickRef}>改变title</button>
        <HeartClass name="子组件" ref={HeartClass => this.HeartClass = HeartClass} age={1}/>
      </div>
    )
  }
}

// LbxinReact.render(<LbxinClass name="lbxin_name" age={18}/> ,root)
// setTimeout(() => {
//   LbxinReact.render(<LbxinClass name="lbxin_name_new" age={20}/> ,root)
//   // LbxinReact.render(<Heart title="hello lbxin"/>, root)
// }, 2000);



class KeyClass extends LbxinReact.Component {
  // 子类继承自父类 当父类中拥有某个属性时  子类也可以通过继承逻辑拿到对应的属性值
  constructor(props){
    super(props)
    this.state = {
      persons: [
        {
          name: '张三',
          id: 1
        },
        {
          name: '李四',
          id: 2
        },
        {
          name: '王五',
          id: 3
        }
      ]
    }
    this.handleClickRef = this.handleClickRef.bind(this)
  }
  handleClickRef(){
    const newState = JSON.parse(JSON.stringify(this.state))
    // newState.persons.push(newState.persons.shift())
    // newState.persons.splice(1,0,{id:Math.random(),name:"lbxin"})
    newState.persons.pop()
    this.setState(newState)
  }
  render(){
    return (
      <div>
        <ul>
          {
            this.state.persons.map(({name,id}) => (
              <li key={id}>
                {name}
                <LbxinClass/>
              </li>
              // <li>{name}</li>
            ))
          }
        </ul>
        <button onClick={this.handleClickRef}>改变title</button>
      </div>
    )
  }
}

LbxinReact.render(<KeyClass />,root)
